<template>
  <!-- 查询页按钮组 -->
  <div class="button-group" :style="positionStyle">
    <el-button v-for="item in handledBtnGroup" :key="item.action" :type="item.type" size="mini" @click="handleClick(item)">{{ item.text }}</el-button>
  </div>
</template>

<script>
export default {
  name: 'ButtonGroup',
  props: {
    // 按钮组
    btnGroup: {
      type: Array,
      default: () => [
        {
          type: 'primary',
          text: '按钮1',
          action: 'btn',
          show: true
        },
        {
          type: 'primary',
          text: '按钮2',
          action: 'btn',
          show: true
        }
      ]
    },
    // 按钮排列位置
    position: {
      type: String,
      default: 'left'
    }
  },
  data() {
    return {
      handledBtnGroup: []
    }
  },
  computed: {
    // 按钮排列位置
    positionStyle() {
      return this.position === 'left' ? '' : 'justify-content: flex-end;'
    }
  },
  created() {
    this.initBtnGroup()
  },
  methods: {
    initBtnGroup() {
      this.handledBtnGroup = this.btnGroup.filter(item => item.show === true || item.show === undefined)
    },
    handleClick(item) {
      console.log(`${item.action}-click`)
      this.$emit(`${item.action}-click`, item)
    }
  }
}
</script>

<style lang="scss" scoped>
.button-group {
  width: 100%;
  // border: 1px solid red; // debug

  display: flex;
  // justify-content: flex-end;
}
</style>
